<template>
  <transition name="slide-fade">
    <div class="nav-cont" v-show="sidebar">
      <div class="nav-mask" @click.stop="toggleSideBar"></div>
      <ul class="nav-list">
        <!-- 展示需要登录且用户已登录的选项【item.loginStatus&&loginStatus】和用户不需要登录的选项【!item.loginStatus】 -->
        <li class="nav-item" v-for="(item,key) of list" :class="defalutIndex==item.index?'active':''" :key="key" v-show='!item.loginStatus||(item.loginStatus&&loginStatus)'>
          <span @click="goPage(item,'index')">{{item.name|t}}</span>
        </li>
      </ul>
      <transition name="slide-toggle">
        <ul class="sub-nav-list" v-if="subNav.length!=0">
          <li class="sub-nav-item" v-for="(items,keys) of subNav" @click="goPage(items,'subindex')" :class="SubNavClass(items)" :key="keys"
            v-show='!items.loginStatus||(items.loginStatus&&loginStatus)'>
            <span>{{items.name|t}}</span>
          </li>
        </ul>
      </transition>
      <div class="nav-bottm-switch" @click='switchLang' :class="switchBool?'swichAnimate':'swichAnimateStop'">
        <span class="active">中</span>
        <span class="sup">En</span>
      </div>
    </div>
  </transition>
</template>
<script>
  import { mapGetters } from 'vuex';
  import { SideBar, Auth } from '@/providers';
  export default {
    name: 'slideNav',
    data() {
      return {
        switchBool: Auth.getItem('lang') == 'zh' ? false : true,
        list: []
      };
    },
    methods: {
      // 语言切换
      switchLang() {
        this.switchBool = !this.switchBool;
        this.$store.dispatch('LANGUAGETYPE');
        let _timer = setTimeout(() => {
          this.toggleSideBar();
          clearTimeout(_timer);
        }, 500);
      },
      // 打开侧边栏，页面跳转
      goPage(item, type) {
        if (type == 'index' && item.sub) {
          this.$store.dispatch('SUBARRDATA', item.sub);
        } else if (type == 'index' && !item.sub) {
          this.$store.dispatch('SUBARRDATA', []);
        }
        if (item.router) {
          this.$router.push({ path: item.router, query: item.query ? item.query : {} });
          this.toggleSideBar();
        }
        this.$store.dispatch('SIDEBARINDEX', { index: item.index, type: type });
      },
      toggleSideBar() {
        this.$store.dispatch('TOGGLESIBAR');
      },
      // 绑定class
      SubNavClass(item) {
        if (item.border) {
          return 'border-b weight';
        }
        if (item.index === this.subIndex) {
          return 'c-primary';
        }
      },
      // 解锁滚动条
      unLockScroll() {
        window.onmousewheel = (event) => {
          return true;
        };
      },
      // 锁定滚动条
      lockScroll() {
        window.onmousewheel = (event) => {
          return false;
        };
      }
    },
    watch: {
      defalutIndex(val) {
        // console.log(val);
      },
      subNav(list) {
        // console.log(list);
      },
      sidebar(val) {
        if (val) {
          this.lockScroll();
        } else {
          this.unLockScroll();
        }
      }
    },
    computed: {
      ...mapGetters([
        'sidebar',
        'defalutIndex',
        'subIndex',
        'loginStatus',
        'subNav'
      ])
    },
    mounted() {
      SideBar.getData().then((res) => {
        this.list = res;
      });
    }
  };
</script>
<style scoped lang="scss">
  @import "../assets/sass/slideNav";
  .slide-fade-enter-active,
  .slide-fade-leave-active {
    transition: all 0.5s ease-in-out 0.2s;
  }

  .slide-toggle-enter-active,
  .slide-toggle-leave-active {
    transition: all 0.3s cubic-bezier(1.0, 0.5, 0.8, 1.0);

  }

  .slide-fade-enter,
  .slide-fade-leave-to {
    transform: translateX(-100px);
    opacity: 0;
  }

  .slide-toggle-enter,
  .slide-toggle-leave-to {
    transform: translateY(100px);
    opacity: 0;
  }
</style>